<!-- 加载ckplayer视频插件css和js -->
<link rel="stylesheet" href="/assets/home/plugin/ckplayer/css/ckplayer.css">
<link rel="stylesheet" href="/assets/home/css/details.css">
<script src="/assets/home/plugin/ckplayer/js/ckplayer.min.js"></script>

<div id="cover">
    <!-- 课程封面 -->
    <img class="cover_bg" src="{$info['thumbs_text']}">
    <!-- 中间播放键 -->
    <div id="play">
        <img src="/assets/home/images/play.png" />
    </div>
</div>

<!-- ckplayer视频容器元素 -->
<div id="video"></div>

<!-- 课程信息 -->
<div class="head">
    <div class="info">
        <h4 class="name">{$info.title}</h4>
        <div class="action">
            <!-- 点赞 -->
            {if condition="$info.like_status"}
            <img class="thumbs" src="/assets/home/images/thumbs-up.png" alt="" onclick="thumbs()">
            {else /}
            <!-- 未点赞 -->
            <img class="thumbs" src="/assets/home/images/thumbs.png" alt="" onclick="thumbs()">
            {/if}
            <span class="num">{$info.like_text}</span>
        </div>
    </div>
</div>

<div class="title">课程章节</div>
<table class="list">
    <tr>
        <td>课程名称</td>
        <td>{$info.title}</td>
    </tr>
    <tr class="price">
        <td>课程价格</td>
        <td>￥{$info.price?$info.price:'0'}元</td>
    </tr>
    <tr>
        <td>发布时间</td>

        <td>{:explode(' ',$info.createtime)[0]}</td>
    </tr>
    <tr>
        <td>章节总数</td>
        <td>{$info['chaptercount']}小节</td>
    </tr>
</table>

<div class="title">课程介绍</div>
<div class="mui-table-view content">{$info.content}</div>

<div class="title">课程章节</div>
<ul class="mui-table-view">
    {if condition="$info['chaptercount'] > 0"}
    {foreach($chapterlist as $item)}
    <li class="mui-table-view-cell" onclick="Paydata(`{$item.id}`)">{$item.title}</li>
    {/foreach}
    {else /}
    <li class="mui-table-view-cell">暂无课程章节</li>
    {/if}
</ul>

<div class="title">用户评论</div>

<!-- 评论内容 -->
<ul class="mui-table-view">
    {foreach($commentList as $item)}
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar}">
            <div class="mui-media-body">
                {$item.business.nickname}
                <p class='mui-ellipsis'>{$item.content}</p>
                <span style=" display: block;width: 100%;text-align: right;">{$item.createtime}</span>
            </div>
        </a>
    </li>
    {/foreach}
</ul>

<div class="more">
    <a href="{:url('/home/subject/commentList',['subid'=>$info.id])}"
        class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
</div>

<!-- 弹出菜单 -->
<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
    <!-- 选择支付方式 -->
    <ul class="mui-table-view">
        <div style="display: flex;">
            <div style="width: 50%;line-height: 60px; font-size: 22px;transform: translateX(18px);">支付方式：</div>
            <select name="way" id="way" style="font-size: 22px;margin-top: 10px;">
                <option value="2">余额支付</option>
                <option value="0">微信支付</option>
                <option value="1">支付宝支付</option>
            </select>
        </div>
    </ul>

    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a id="buy" href="javascript:void(0)">
                立即购买
            </a>
        </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a href="#sheet1"><b>取消</b></a>
        </li>
    </ul>
</div>
<script>
    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })

    // 点击播放
    $("#play").on('click', function () {
        Paydata()
    })

    function Paydata(chapter) {
        let data = {
            subid: `{$info.id}`
        }
        if (chapter) {
            data.chapterid = chapter
        }
        $.ajax({
            type: "POST",
            url: `{:url('home/subject/pay')}`,
            dataType: 'json',
            data: data,
            success: function (res) {
                if (res.code == 0) {
                    mui.toast(res.msg)
                    if (res.url) {
                        setTimeout(() => {
                            location.href = `{:url('home/index/login')}`
                        }, 2000)
                        return
                    }
                    mui('#sheet1').popover('toggle');
                } else {
                    let url = res.data.url ?? ''
                    if (!url) {
                        mui.toast(res.msg);
                        return false;
                    }
                    $("#cover").css('display', 'none');
                    $("#video").css('display', 'block');
                    var videoObject = {
                        container: '#video',//视频容器的ID
                        video: url,//视频地址
                        autoplay: true, // 自动播放
                        screenshot: true, // 截图
                    }
                    new ckplayer(videoObject);
                }
            }
        })

    }

    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index == 1) {
                var way = $('#way').val()
                $.ajax({
                    type: 'POST',
                    url: `{:url('home/subject/buy')}`,
                    data: {
                        subid: `{$info.id}`,
                        way: way
                    },
                    success: function (res) {
                        if (res.code == undefined) {
                            document.open();
                            document.write(res);
                            document.close();
                            return
                        }
                        mui.toast(res.msg)
                    }
                })
            }
        })
    })

    function thumbs() {
        $subid = '{$info.id}'
        $.ajax(
            {
                url: `{:url('home/subject/thumbsUp')}`,
                type: 'post',
                dataType: 'json',
                data: {
                    subid: $subid
                },
                success(res) {
                    if (res.code == 1) {
                        mui.toast(res.msg)
                        setTimeout(() => {
                            location.reload()
                        }, 1000)

                    } else {
                        mui.toast(res.msg)
                        if (!res.data) {
                            setTimeout(() => {
                                location.href = `{:url('home/index/login')}`
                            }, 2000)
                        }
                    }

                }
            }
        )
    }
</script>